<!--
 * @Author: ChaiHongJun
 * @Date: 2021-07-23 15:52:10
 * @LastEditors: ChaiHongJun
 * @LastEditTime: 2021-07-24 08:41:13
 * @version: 
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <title>axios基本使用</title>
  </head>
  <body>
    <div class="container">
      <h2 class="page-header">基本使用</h2>
      <button class="btn btn-primary" type="button">GET</button>
      <button class="btn btn-warning" type="button">POST</button>
      <button class="btn btn-success" type="button">PUT</button>
      <button class="btn btn-danger" type="button">DELETE</button>
      <div class="card">
        <div class="card-body">
          <p>axios 响应的返回对象包含如下几个对象</p>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">config (请求配置)</li>
            <li class="list-group-item">headers (响应头)</li>
            <li class="list-group-item">data (响应的数据，也就是body)</li>
            <li class="list-group-item">request (XMLHttpRequest 原生对象)</li>
            <li class="list-group-item">status (响应状态码)</li>
            <li class="list-group-item">statusText (响应状态字符串)</li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>
<script>
  window.addEventListener("load", () => {
    const buttons = document.querySelectorAll("button");
    for (let i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener("click", () => {
        //触发axios请求
        let methods = ["GET", "POST", "PUT", "DELETE"];
        let data = null;
        let url = "http://localhost:3000/posts";
        if (i == 1) {
          // post  新增数据
          data = {
            id: 2,
            title: "vue2",
            author: "Eyou",
          };
        } else if (i == 2) {
          //put 修改数据
          url = url + "/1";
          data = {
            title: "vue-router",
            author: "Martin Morote",
          };
        } else if (i == 3) {
          //delete 删除数据
          url = url + "/1";
        }
        axios({
          method: methods[i],
          url: url,
          // 'PUT', 'POST', 'DELETE'和 'PATCH'
          data: i ? data : undefined,
        })
          .then((res) => {
            console.log("res", res);
            return;
            // {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
            /*
             * config: {url: "http://localhost:3000/posts/1", method: "get", headers: {…}, transformRequest: Array(1), * *transformResponse: Array(1), …}
             *
             * data: {id: 1, title: "json-server", author: "typicode"}
             *
             * headers: {cache-control: "no-cache", content-length: "63", content-type: "application/json; charset=utf-8", expires: "-1", pragma: "no-cache"}
             *
             * request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …}
             *
             * status: 200
             *
             * statusText: "OK"
             */
          })
          .catch((err) => {
            console.log(err);
          });
      });
    }
  });
</script>
